<template>
  <el-container>
    <!-- 顶部栏 -->
<!--    <el-header class="header">
      <div class="logo">
        <img :src="logoSrc" alt="logo" class="logo-img" />
        <span class="system-name">慧医数字医疗应用系统</span>
      </div>
      <div class="user-info">
        欢迎来到慧医数字医疗应用系统，当前用户：<span class="admin">{{ administrators }}</span>
        <el-button type="text" @click="logout">退出登录</el-button>
      </div>
    </el-header>-->
    <el-container>
      <!-- 侧边栏 -->
<!--      <el-aside width="200px" class="aside">
        <el-menu
            default-active="1"
            class="el-menu-vertical"
            router
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/medicine-company">医药公司管理</el-menu-item>
          <el-menu-item index="/sales-location">销售地点管理</el-menu-item>
          <el-menu-item index="/city-info">城市信息管理</el-menu-item>
          <el-menu-item index="/drug-info">药品信息管理</el-menu-item>
          <el-menu-item index="/medical-insurance">医保政策管理</el-menu-item>
          <el-menu-item index="/medicine-policy">医药公司政策管理</el-menu-item>
          <el-menu-item index="/doctor-info">医生信息管理</el-menu-item>
          <el-menu-item index="/necessary-materials">必备材料管理</el-menu-item>
        </el-menu>
      </el-aside>-->
      <!-- 主内容区 -->
      <el-main class="main">
        <el-carousel :interval="3000" height="450px" trigger="click" arrow="hover">
          <el-carousel-item v-for="(url, index) in picList" :key="index">
            <el-image :src="url.image" fit="contain"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div class="card-list">
          <el-card
              :body-style="{ padding: '0px' }"
              v-for="(card, index) in cardList"
              :key="index"
              shadow="hover"
          >
            <el-image
                style="width: 200px; height: 150px;"
                :src="card.pic"
                fit="cover"
            />
            <div class="card-content">
              <span>{{ card.content }}</span>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "HomeWelcome",
  data() {
    return {
      administrators: "admin",
      logoSrc: require("../../assets/logo.png"), // 假设logo图片路径
      picList: [
        { image: require("../../assets/hUlLAP.png") },
        { image: require("../../assets/hUlH0I.png") },
        { image: require("../../assets/hUlOtf.jpg") },
        { image: require("../../assets/hUlb7t.jpg") },
        { image: require("../../assets/hUl7nA.jpg") },
      ],
      cardList: [
        {
          pic: require("../../assets/hUDHDP.jpg"),
          content: "基础信息管理",
        },
        {
          pic: require("../../assets/hU0KDf.jpg"),
          content: "药品信息管理",
        },
        {
          pic: require("../../assets/hUBref.jpg"),
          content: "医保政策管理",
        },
        {
          pic: require("../../assets/hU0yG9.jpg"),
          content: "医药公司政策管理",
        },
        {
          pic: require("../../assets/hUB2Wj.jpg"),
          content: "医生信息管理",
        },
        {
          pic: require("../../assets/hUDYn0.jpg"),
          content: "必备材料管理",
        },
      ],
    };
  },
  methods: {
    logout() {
      localStorage.removeItem('token') // 清除Token
      this.$router.push('/login') // 跳回登录页
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.logo {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.system-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.user-info {
  font-size: 14px;
  color: #666;
}
.admin {
  color: #409eff;
  font-weight: bold;
  margin: 0 5px;
}
.aside {
  background-color: #455a64;
}
.el-menu-vertical {
  background-color: #455a64;
}
.el-menu-item {
  color: #fff !important;
}
.el-menu-item.is-active {
  background-color: #5a6e78 !important;
}
.main {
  padding: 20px;
  background-color: #f0f2f5;
}
.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}
.el-card {
  width: 220px;
  margin-bottom: 20px;
}
.card-content {
  display: flex;
  justify-content: left;
  align-items: center;
  border-left: 7px solid #455a64;
  margin-top: -2px;
  padding: 14px;
}
.card-content span {
  font-size: 16px;
  font-weight: 900;
}
</style>